<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插入和替换元素操作</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<!-- 插入和替换元素操作：针对元素增删改动作 -->
		<style>
			button{
				margin: 5px;
				padding: 10px 15px;
				cursor: pointer;
			}
			body{
				margin: 20px;
			}
			#target{
				border: 1px solid black;
				padding: 10px;
				margin-top: 10px;
				border-radius: 5px;
			}
			#newElement{
				display: none;
			}
		</style>
	</head>
	<body>
		<!-- html:7个按钮 div包含p包含：目标元素的初始段落 id="target"
						 div包含p包含：插入新元素的初始段落 id="newElement"隐藏
			 css：按钮：外边距5px，内边距：10px 15px 鼠标移动上：手指显示
				body：外边距20px
				#target：1像素边框，内边距：10px，上外边距：10px
			引入JQ	
		 -->
		 <button id="appendBtn">内部末尾插入元素</button>
		 <button id="prependBtn">内部开头插入元素</button>
		 <button>外部后面插入元素</button>
		 <button>外部前面插入元素</button>
		 <button></button>
		 <button></button>
		 <button></button>
		 <!-- 目标显示区域 -->
		 <div id="target">
			<p>目标元素的初始段落</p>
		 </div>
		 <div id="newElement">
		 	<p>插入新元素的初始段落</p>
		 </div>
		 <script>
			 /* 1.点击 内部末尾插入元素 按钮 */
			 $("#appendBtn").click(function(){
				//效果： 点击按钮 追加“新元素--自带内容”
				//1.1 追加内容是新元素---克隆--html结构全部复制出来，元素包含属性
			     var cpe=$("#newElement").clone();
				 //clone() 创建一个元素的副本，副本包含：内部元素以及所有属性和属性值
				 //1.2 自带属性和属性值：隐藏---改成显示
				 cpe.css("display","block")
				 //1.3 将复制出来的新元素，追加给当前元素上
				 $("#target").append(cpe);
			 });
			 /* 2.点击 内部开头插入元素 按钮 p文本后面追加新元素中包含内容操作 */
			 $("#prependBtn").click(function(){
			 				//效果： 点击按钮 追加“新元素--自带内容”
			 				//1.1 追加内容是新元素---克隆--html结构全部复制出来，元素包含属性
			     var cpee=$("#newElement").clone();
			 				 //clone() 创建一个元素的副本，副本包含：内部元素以及所有属性和属性值
			 				 //1.2 自带属性和属性值：隐藏---改成显示
			 				 cpee.css("display","block")
			 				 //1.3 将复制出来的新元素，追加给当前元素上
			 				 $("#target").prepend(cpee);
			 });
			 /* 3.点击 外部后面插入元素 按钮 p文本后面追加新元素中包含内容操作 */
			 $("#prependBtn").click(function(){
			 				//效果： 点击按钮 追加“新元素--自带内容”
			 				//1.1 追加内容是新元素---克隆--html结构全部复制出来，元素包含属性
			     var cpee=$("#newElement").clone();
			 				 //clone() 创建一个元素的副本，副本包含：内部元素以及所有属性和属性值
			 				 //1.2 自带属性和属性值：隐藏---改成显示
			 				 cpee.css("display","block")
			 				 //1.3 将复制出来的新元素，追加给当前元素上
			 				 $("#target").prepend(cpee);
			 });
			 /* 4.点击 外部前面插入元素 按钮 生成 圆形，保留背景色，文本不需要，
											背景图 300*300 */
		 </script>
	</body>
</html>